<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .th1 {
            border-bottom: 1px solid #f1d8b6;
            text-align: left;
        }

        .td1 {
            padding: 0.6em 1em;
            border-bottom: 1px solid #f1d8b6;
            border-left: 1px solid #f1d8b6;
        }

        .table1 {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 6px;
            border: none;
            border: 2px solid #f1d8b6;
            font-weight: bold;
            color: #a56437;
            font-size: 14px;
        }

        .bc {
            background-color: #e6f8f4;
        }

        .fa-arrow-left:before {
            content: "\f060";
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-menu style="width: 1200px;margin: 0 auto"
                     mode="horizontal"
                     @select="handleSelect"
                     text-color="black"
                     active-text-color="black">
                <a href=""><img src="logo.png" style="float: left;position: relative;width: 80px; height: 77px"></a>
                <el-menu-item index="1" class="el-menu-item_top"><b><a href="/index.html">首页</a> </b></el-menu-item>
                <el-menu-item class="el-menu-item_top">
                    <el-submenu index="2" style="position:relative;top:3px;right: 5px">
                        <template slot="title"><b>在售品种</b></template>
                        <el-menu-item index="2-1"><a href="/searchcat.html">在售猫咪</a></el-menu-item>
                        <el-menu-item index="2-2"><a href="/searchdog.html">在售狗狗</a></el-menu-item>
                    </el-submenu>
                </el-menu-item>
                <el-menu-item class="el-menu-item_top">
                    <el-submenu index="3" style="position:relative;top:3px;right: 5px">
                        <template slot="title"><b>宠物词典</b></template>
                        <el-menu-item index="3-1"><a href="/catDictionary.html">猫咪的饲养方式</a></el-menu-item>
                        <el-menu-item index="3-2"><a href="/dogDictionary.html">狗狗的饲养方式</a></el-menu-item>
                    </el-submenu>
                </el-menu-item>
                <el-menu-item class="el-menu-item_top">
                    <el-submenu index="4" style="position:relative;top:3px;right: 5px">
                        <template slot="title"><b>服务项目</b></template>
                        <el-menu-item index="4-1"><a href="/宠物美容.html">宠物美容</a></el-menu-item>
                        <el-menu-item index="4-2"><a href="/宠物酒店.html">宠物酒店</a></el-menu-item>
                        <el-menu-item index="4-3"><a href="/catcafe.html">猫咖啡馆</a></el-menu-item>
                        <el-menu-item index="4-4"><a href="/dogpark.html">狗狗公园</a></el-menu-item>
                    </el-submenu>
                </el-menu-item>
                <el-menu-item index="5" class="el-menu-item_top"><a href="/lianxi.html"><b>联系我们</b></a></el-menu-item>
                <el-menu-item index="6" style="float: right;position: relative"><i class="el-icon-user" style="font-size: 30px"></i></el-menu-item>
                <div style="float: right;position: relative;top: 10px">
                    <el-input type="text">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </el-menu>
        </el-header>

        <el-main style="overflow: hidden;">
            <h1 style="color: #64c9e1;font-size: 42px;
                text-align: center;padding: 1em;">{{cats.name}}
                <small style="color: #9A9A9A;font-weight: 300;
                 line-height: 1.5;font-size: 60%;">No.{{cats.id}}</small>
            </h1>

            <div>
                <div style="margin: 0 auto;overflow: hidden;width: 1170px;height: 480px">
                    <div style="float: left;">
                        <img style="max-width:100%;border-radius: 6px;" height="450" width="450"
                             :src="img.img1"
                             alt="">

                    </div>
                    <div style="padding-left:30px;width:682px;height:348px;float: left">
                        <table class="table1">
                            <tr class="bc">
                                <th style="border-top-left-radius:6px;" class="th1">状态</th>
                                <td style="border-top-right-radius: 6px" class="td1">{{cats.zt}}</td>
                            </tr>
                            <tr>
                                <th class="th1">查询号码</th>
                                <td class="td1">{{cats.id}}</td>
                            </tr>
                            <tr class="bc">
                                <th class="th1">性别</th>
                                <td class="td1">{{cats.sex}}</td>
                            </tr>
                            <tr>
                                <th class="th1">生日</th>
                                <td class="td1">{{cats.birth}}</td>
                            </tr>
                            <tr class="bc">
                                <th class="th1">毛色</th>
                                <td class="td1">{{cats.color}}</td>
                            </tr>
                            <tr>
                                <th class="th1">出生地</th>
                                <td class="td1">{{cats.csd}}</td>
                            </tr>
                            <tr class="bc">
                                <th class="th1">疫苗接种</th>
                                <td class="td1">已接种({{cats.ym}}次)</td>
                            </tr>
                            <tr>
                                <th class="th1">血统书</th>
                                <td class="td1">{{cats.xts}}</td>
                            </tr>
                            <tr class="bc" style="font-size: 17px">
                                <th style="border-bottom-left-radius:6px;" class="th1">宠物价格</th>
                                <td style="border-bottom-right-radius:6px;" class="td1">{{cats.money}}元</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <div style="margin: 0 auto;width: 1170px;height: 145px">
                <h5 style="width:100%;color: #a56437;font-size: 18px;margin-bottom: 15px">特征
                    <small style="color: #9A9A9A;font-weight: 300;
                 line-height: 1.5;font-size: 75%;">Features</small>
                </h5>
                <div style="color: #a56437;padding: 1em;margin: 10px;border-radius: 6px;background-color: #f1d8b6">
                    <p style="line-height: 1.5;margin: 0 0 10px;">体重：{{cats.weight}}kg( 体重测试日：{{cats.weightday}})</p>
                    <p style="line-height: 1.5;margin: 0 0 10px;">{{cats.tz}}</p>
                </div>
            </div>

            <hr style="width:1200px;margin-top: 50px;
            margin-bottom: 40px;border: 0;border-top: 1px solid #9A9A9A;">

            <div style="margin: 0 auto;width: 1170px;height: 370px">
                <img style="border-radius: 6px"  :src="img.img1" height="360" width="360" alt="">
                <img style="margin-left:20px;border-radius: 6px" :src="img.img3" height="360" width="360" alt="">
                <img style="margin-left:20px;border-radius: 6px" :src="img.img4" height="360" width="360" alt="">
            </div>

            <hr style="width:1200px;margin-top: 50px;
            margin-bottom: 40px;border: 0;border-top: 1px solid #9A9A9A;">

            <div style="text-align: center;color: #a56437;">
                <p>如果要寻找其他品种的猫猫，请联系我们的店员。</p>
            </div>

            <div style="text-align: center;padding-top: 30px">
                <el-button @click="back()" style="border-color: #f5b2b2;background-color: #f5b2b2;" type="primary" icon="el-icon-back">
                    Back
                </el-button>
            </div>


        </el-main>


    </el-container>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            img: {
                img1: 'img/217-1.jpg',
                img2: 'img/217-2.jpg',
                img3: 'img/217-3.jpg',
                img4: 'img/217-4.jpg',
            },
            cats: {    id:'01',
                name:'英国短毛猫',
                zt:'受理中',
                sex:'男孩',
                birth:'2022/02/23',
                color:'金色',
                csd:'武汉',
                ym:'2',
                xts:'有',
                money:'300',
                weight:'2.1',
                weightday:'2022/08/12',
                tz:'活泼可爱'
            },
        },
        methods: {
            back(){
              location.href="/searchcat.html";
            },
            handleSelect1(key,keyPath){
                v.currentIndex=key

            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        created:function () {
            axios.get("select"+location.search).then(function (response) {
                v.cats = response.data;
            })
        }
    })
</script>
</body>
</html>